﻿<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/custom-july.css" />
		<link rel="stylesheet" href="../css/custom-dw.css" />
		<link rel="stylesheet" href="../fonts/iconfont.css" />
		<link rel="stylesheet" href="../css/mui.picker.all.css" />
	</head>

	<body>
		<div class="mui-content ju-form-wrap">
			<div class="cont">
				<script type="text/html" id="tpl-form-attendence-register">
					<form class="mui-input-group ju-form">
						<div class="mui-input-row">
							<label>申报起始时间<i class="z-required">*</i></label>
							<a class="link fn-picker" data-type="startDate">
								<span class="date-start">{{startDate}}</span>
								<input type="hidden" value="{{startDate}}" name="startDate" />
								<i class="iconfont icon-arrow-right"></i>
							</a>
						</div>
						<div class="mui-input-row">
							<label>申报截止时间<i class="z-required">*</i></label>
							<a class="link fn-picker" data-type="endDate">
								<span class="date-end">{{endDate}}</span>
								<input type="hidden" value="{{endDate}}" name="endDate" />
								<i class="iconfont icon-arrow-right"></i>
							</a>
						</div>
						<div class="mui-input-row">
							<label>申报类型<i class="z-required">*</i></label>
							<a class="link fn-picker" data-type="applyType">
								<span class="reg-type">{{applyType}}</span>
								<input type="hidden" value="{{applyType}}" name="applyType" />
								<i class="iconfont icon-arrow-right"></i>
							</a>
						</div>
						<div class="mui-input-row">
							<label>申请原因<i class="z-required">*</i></label>
							<textarea class="fn-textarea-reason" cols="12" rows="2" name="reason" placeholder="请输入">{{reason}}</textarea>
							<div class="textarea-count"><span class="counting">0</span>/200</div>
						</div>
					</form>
					<div class="ju-pics-upload-wrap mui-clearfix">
						<ul class="img-list mui-list-inline">
							{{include 'tpl-attach-item'}}
						</ul>
					</div>
				</script>
			</div>
			<div class="opts">
				<button type="button" class="mui-btn u-btn-bottom mui-btn-block fn-submit" data-loading-text="提交中">提交</button>
			</div>
		</div>

		<script type="text/html" id="tpl-attach-item">
			{{each attaches}}
				<li class="img-item">
					<div class="item-wrap">
						<img class="img" src="{{$value.uri}}" />
						<a class="del fn-remove-attach" data-id="{{$value.uri}}">
							<i class="iconfont icon-close"></i>
						</a>
					</div>
				</li>
			{{/each}}
			{{if (attaches.length == 0)}}
			{{set newClass="z-new"}}
			{{else}}
			{{set newClass=""}}
			{{/if}}
			{{if (attaches.length >= 5)}}
			{{set hiddenClass="mui-hidden"}}
			{{else}}
			{{set hiddenClass=""}}
			{{/if}}
			<li class="btn-add {{hiddenClass}}">
				<div class="item-wrap btn-wrap {{newClass}}">
					<input type="file" multiple accept="image/*" style="display: none;" />
					<div class="new">
						<i class="iconfont icon-pic-new"></i>
						<span>添加图片</span>
					</div>
					<div class="add">
						<i class="iconfont icon-pics"></i>
						<span class="pics-num">{{attaches.length}}/5</span>
					</div>
				</div>
			</li>
		</script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.all.js"></script>
		<script src="../fonts/iconfont.js"></script>
		<script src="../js/template-web.js"></script>
		<script src="../js/mui.extend.js"></script>
		<script src="../js/lodash.min.js"></script>
		<script src="../js/apply.js"></script>
		<script src="../js/ajaxConfig.js"></script>
		<script src="../js/dw-wheel.js"></script>
		<script src="../js/getPhoto.js"></script>
		<script type="text/javascript">
			//value需根据实际情况更改
			var _typeArr = [
			{value: '0',text: '班车晚点'},
			{value: '1',text: '出差'	},
			{value: '2',text: '打卡无记录'},
			{value: '3',text: '其他'},
			{value: '4',text: '外出办事'},
			{value: '5',text: '外出开会'},
			{value: '6',text: '外地培训'},
			{value: '7',text: '忘记带卡'}];
			var	_attaches = [];
			var _initData = {
				"startDate": applyPublicMethods.getFormatDate(),
				"endDate": applyPublicMethods.getFormatDate(),
				"reason": "",
				"applyType": "",
				"attaches": _attaches
			};
			var _pickers = {
				applyType: null,
				startDate: null,
				endDate: null
			};
			
			function getInfo() {
				//直接获取空白信息
				fillPage(_initData)
				//获取当前页面必要信息（api或本地预存信息，查询本地保存信息并渲染页面
//				var locdata = applyPublicMethods.getLocal(HR_STO_APPLY_ADVANCEATTENDENCEREGISTER);
//				if(locdata) {
//					fillPage(JSON.parse(locdata));
//				} else {
//					fillPage(_initData);
//				}
			}

			function fillPage(data) {
				var html = template('tpl-form-attendence-register', data);
				mui('.ju-form-wrap .cont')[0].innerHTML = html;

				//注册事件
				applyPublicMethods.initTextareaCounting(mui('.fn-textarea-reason')[0], mui('.counting')[0], 200)
			}

			function initPicker(type) {
				if(_pickers[type] === null) {
					if(type === 'applyType') {
						//申请类型选择
						_pickers[type] = new mui.PopPicker({
							title: '申请类型'
						});
						_pickers[type].setData(_typeArr)
					} else {
						var t = '起始时间';
						if(type === 'endDate') {
							t = '截止时间';
						}
						//时间选择
						_pickers[type] = new mui.DtPicker({
							title: t,
							showWeek: true
						})
					}
				}
			}

			function showPicker(e) {
				var type = this.getAttribute('data-type');
				initPicker(type);
				_pickers[type].show(function(item) {
					switch(type) {
						case 'applyType':
							mui('.reg-type')[0].innerHTML = item[0].text;
							mui('input[name="' + type + '"]')[0].value = item[0].value;
							break;
						case 'startDate':
							mui('.date-start')[0].innerHTML = item.value;
							mui('input[name="' + type + '"]')[0].value = item.value;
							break;
						case 'endDate':
							mui('.date-end')[0].innerHTML = item.value;
							mui('input[name="' + type + '"]')[0].value = item.value;
							break;
					}
				})
			}

			function clearForm() {
				//重置信息
				fillPage(_initData)
				//清空本地存储
				//applyPublicMethods.removeLocal(HR_STO_APPLY_ADVANCEATTENDENCEREGISTER);
				mui('.mui-input-row input').input(); //dom已变，重新注册
				//重置附件
				_attaches = [];
				renderAttachTempl()
			}

			function getFormData() {
				//获取除了附件以外的表单信息
				var tdata = {};
				var doms = document.querySelector('.ju-form-wrap').querySelectorAll('input[name],textarea[name]');
				doms.forEach(function(ele, index) {
					tdata[ele.getAttribute('name')] = ele.value;
				})
				//获取附件列表
				var imgs = document.querySelector('.ju-form-wrap').querySelectorAll('.img');
				var imgarr = [];
				imgs.forEach(function(ele, index) {
					imgarr.push(ele.getAttribute('src'))
				})
				tdata.attaches = imgarr;
				return tdata;
			}

			function actionSubmit() {
				document.activeElement.blur();

				var tdata = getFormData();
				console.log(tdata)
				//提交前数据验证(暂未特殊处理~)
				var vflag = true;
				for(i in tdata) {
					if(!tdata[i] || _.trim(tdata[i]) == "") {
						vflag = false;
						break;
					}
				}
				if(!vflag) {
					mui.toast('请填写完整')
					return false;
				}

				//开始提交
				mui('.fn-submit').button('loading');
				//提交流程：需根据实际情况制定
//				setTimeout(function() {
//					var form = getPhoto.setFormData(tdata);
//					dw.dwajax({
//						url: server,
//						type: 'POST',
//						data: form,
//						dataType: 'json',
//						success: clearForm,
//						error: function(re) {
//							mui.alert(re.error);
//						}
//					});
//
//					/*publicApi.upLoadFiles({
//						data: form,
//						success: function() {
//
//						}
//					});*/
//					mui('.fn-submit').button('reset');
//				}, 1500);
			}

			function actionBack() {
				var curdata = getFormData();
				if(!_.isMatch(_initData, curdata)) {
					mui.confirm('您的内容尚未保存，是否保存', '提示', ['取消', '确认'], function(e) {
						if(e.index == 0) {
							//取消并返回
						} else {
							//保存并返回
							applyPublicMethods.saveLocal(HR_STO_APPLY_ADVANCEATTENDENCEREGISTER, JSON.stringify(curdata))
						}
						mui.oldback()
					})
					return false;
				} else {
					return true;
				}
			}

			/*
			 * 上传附件部分
			 */
			//预上传处理
			function actionPreUploadImgs(){
				//模拟
				_attaches.push({
					'uri':'../image/qr-code.png'
				})
				var html = template('tpl-attach-item', {attaches:_attaches});
				mui('.img-list')[0].innerHTML = html;
				
				//实际上传
				getPhoto.getFiles({
					domID: 'input[type="file"]',
					callbackfn: function(imgObj){
						for(var i in imgObj){
							_attaches.push({
								'uri': imgObj[i]
							})
						}
						renderAttachTempl()
					}
				})
			}
			function removeAttachItem(){
				var cur = this;
				var imgid = cur.getAttribute('data-id');
				//比较要删除的对象
				for(var i in _attaches){
					if(_attaches[i].uri === imgid){
						_attaches.splice(i,1);
						break;
					}
				}
				renderAttachTempl()
			}
			//渲染附件页面，本次采用数据控制页面的模式
			function renderAttachTempl(){
				var html = template('tpl-attach-item', {attaches:_attaches});
				mui('.img-list')[0].innerHTML = html;
			}
			
			/* init and bindings */
			mui.init()
			mui.initBackHeader({
				title: '考勤申报',
				rightBtn: '清除',
//				leftCallback: actionBack,
				rightCallback: clearForm
			})
			getInfo()
			mui('.ju-form-wrap')
				.on('tap', '.fn-picker', showPicker)
				.on('tap', '.fn-submit', actionSubmit)
				.on('tap', '.btn-add', actionPreUploadImgs)
				.on('tap', '.fn-remove-attach', removeAttachItem)
		</script>
	</body>

</html>